<template>
    <div class="d-box">
      <ul>
        <li v-for="(item,index) in data" :key="index">
          <router-link :to="item.path" :class="{act_color:$route.params.id==index}">
            {{item.txt}}<p v-if="$route.params.id==index"></p>
          </router-link>
        </li>
      </ul>

      <router-view></router-view>
    </div>
</template>

<script>
    export default {
      name: "SearchDetail",
      data(){
        return {
          data:[
            {path:'/synthesize/0',txt:'综合'},
            {path:'/ball/1',txt:'舞会'},
            // {path:'/course/2',txt:'课程'},
            {path:'/searchvideo/2',txt:'视频'},
            {path:'/organization/3',txt:'机构'},
            {path:'/expert/4',txt:'达人'}
          ]
        }
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
  .d-box{
    padding-top: 80px;
  }
  ul{
    position: fixed;
    left: 0;
    top: 100px;
    z-index: 9999;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 2px solid #cdcdcd;
  }
  ul li{
    position: relative;
    width: 20%;
    font-size: 28px;
    border-right: 1px solid #444;
    text-align: center;
  }
  ul .act_color{
    color: #884ca4;
  }
  ul li p{
    position: absolute;
    left: 50%;
    margin-left: -30px;
    bottom: -20px;
    width: 60px;
    border: 1px solid #884ca4;
  }
  ul li:last-child{
    border: none;
  }
</style>
